<template>
	<view class="page flex-vbox">
		<view class="header">
			<view class="tips">
				<view>登录网易云音乐</view>
				<view>手机电脑多端同步，尽享海量高品质音乐</view>
			</view>
			<view>
				<navigator class="link-btn">立即登录</navigator>
			</view>
			<view class="ad-bar flex-box flex-valign">
				<view class="leading">
					<view>开通黑胶VIP</view>
					<view class="sub-title">新客仅5元</view>
				</view>
				<view class="flex-item">
					免费领福利
				</view>
				<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/github.svg"></image>
			</view>
		</view>
		<view class="content flex-item">
			<scroll-view scroll-y style="height: 100%;">
				<view class="panel">
					<view class="row action-bar">
						<view class="action">
							<i class="music-icon music-icon-mail"></i>
							<view>我的消息</view>
						</view>
						<view class="action">
							<i class="music-icon music-icon-user"></i>
							<view>我的好友</view>
						</view>
						<view class="action">
							<i class="music-icon music-icon-cloth"></i>
							<view>个性换肤</view>
						</view>
						<view class="action">
							<i class="music-icon music-icon-record"></i>
							<view>听歌识曲</view>
						</view>
					</view>
				</view>
				<view class="panel">
					<view class="row flex-valign">
						<i class="music-icon music-icon-ticket"></i>
						<view class="flex-item">							
							演出
						</view>
						<view class="sub-title">刺猬</view>
					</view>
					<view class="row flex-valign">
						<i class="music-icon music-icon-cart"></i>
						<view class="flex-item">							
							商城
						</view>
						<view class="sub-title">赠99无线充</view>
					</view>
					<view class="row flex-valign">
						<i class="music-icon music-icon-location"></i>
						<view class="flex-item">							
							附近的人
						</view>
					</view>
					<view class="row flex-valign">
						<i class="music-icon music-icon-bell"></i>
						<view class="flex-item">							
							口袋铃声
						</view>
					</view>
					<view class="row flex-valign">
						<i class="music-icon music-icon-order"></i>
						<view class="flex-item">							
							我的订单
						</view>
					</view>
				</view>
				<view class="panel">
					<view class="row flex-valign">
						<i class="music-icon music-icon-clock"></i>
						<view class="flex-item">							
							定时停止播放
						</view>
					</view>
					<view class="row flex-valign">
						<i class="music-icon music-icon-scan"></i>
						<view class="flex-item">							
							扫一扫
						</view>
					</view>
					<view class="row flex-valign">
						<i class="music-icon music-icon-clock"></i>
						<view class="flex-item">							
							音乐闹钟
						</view>
					</view>
					<view class="row flex-valign">
						<i class="music-icon music-icon-traffic"></i>
						<view class="flex-item">							
							在线听歌免流量
						</view>
					</view>
					<view class="row flex-valign">
						<i class="music-icon music-icon-game"></i>
						<view class="flex-item">							
							游戏推荐
						</view>
						<view class="sub-title">闪耀暖暖上线</view>
					</view>
					<view class="row flex-valign">
						<i class="music-icon music-icon-coupon"></i>
						<view class="flex-item">							
							优惠券
						</view>
					</view>
					<view class="row flex-valign">
						<i class="music-icon music-icon-voice"></i>
						<view class="flex-item">							
							我要直播
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="footer flex-box">
			<view class="flex-item">
				<i class="music-icon music-icon-moon"></i>
				夜间模式
			</view>
			<view class="flex-item flex-box">
				<view class="flex-item">
					<i class="music-icon music-icon-setting"></i>
					设置
				</view>
				<view class="flex-item" @click="exitApp">
					<i class="music-icon music-icon-close"></i>
					退出
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			exitApp() {
				// #ifdef APP-PLUS
				plus.runtime.quit();
				// #endif
				// #ifdef H5
				// window.opener=null;
				// window.open('','_self', '');
				// window.close();
				open(location.href, '_self').close();
				// #endif
			}
		},
	}
</script>

<style lang="scss" scoped>
	$box-padding: 12rpx;
	$panel-padding: 30rpx;
	.page{
		background: #EBEBEB;
	}
	.header{
		padding: 100rpx 0;
		text-align: center;
		position: relative;
		overflow: visible;
	}
	.tips{
		padding: 30rpx 0;
	}
	.footer{
		background: #FFFFFF;
		padding: $panel-padding 5%;
		.music-icon{
			padding-right: 20rpx;
			vertical-align: middle;
			font-size: 36rpx;
		}
	}
	.link-btn{
		padding: 10rpx 60rpx;
		border-radius: 30rpx;
		border: #CCCCCC solid 2rpx;
	}
	.ad-bar{
		position: absolute;
		z-index: 10;
		box-sizing: border-box;
		width: 90%;
		padding: 12rpx 9rpx;
		left: 5%;
		bottom: -45rpx;
		background: #1b1b1b;
		color: #FFFFFF;
		border-radius: 12rpx;
		font-size: 20rpx;
		box-shadow: 0 12rpx 24rpx -6rpx #CCCCCC;
	}
	.leading{
		padding-left: $box-padding;
		padding-right: 26rpx;
		font-size: 24rpx;
		color: #f5dad6;
		text-align: left;
	}
	.leading .sub-title{
		color: #9c9c9c;
	}
	.ad-bar {
		.flex-item{
			padding: 8rpx $box-padding;
			text-align: right;
			border-left: #4a4a4a solid 4rpx;
		}
		image{
			margin-right: $box-padding;
			width: 28rpx;
			height: 28rpx;
		}
	}
	.content{
		overflow: hidden;
	}
	.panel{
		padding: $panel-padding 5% 0;
		background: #FFFFFF;
		&:nth-child(1){
			padding-top: 75rpx;
		}
		&:not(:last-child){
			.row:last-child{
				border-bottom: $border-color solid 2rpx;
			}
		}
		.row{
			padding-bottom: $panel-padding;
			display: flex;
			.music-icon{
				font-size: 36rpx;
			}
			.flex-item{
				padding: 0 10rpx
			}
			.sub-title{
				color: #9c9c9c;
			}
		}
	}
	.action-bar{
		justify-content: space-around;
		.action{
			text-align: center;
			view{
				font-size: 22rpx;
			}
		}
		.music-icon{
			color: $main-color;
			font-size: 46rpx;
		}
	}
</style>
